<template>
	<view class="subsection">
		<view class="sub-block" :style="{left:current*194 + 7+'rpx'}">
		</view>
		<view class="sub-item" :class="{active:current == item.index}" v-for="(item,index) in list" :key="index"
			@click="switchTab(item.index)">
			{{item.name}}
		</view>

	</view>
</template>

<script>
	export default {
		name: 'hsSubsection',
		props: {
			list: {
				type: Array,
				default: () => {
					[]
				}
			},
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
			}
		},
		methods: {
			switchTab(index) {
				console.log(this.current*201+7);
				console.log(index);
				this.$emit('switchTab', index)
			}
		},
		created() {
		}

	}
</script>

<style lang="scss">
	.subsection {
		width: 100%;
		background: #333333;
		height: 84rpx;
		display: flex;
		justify-content: center;
		border-radius: 42rpx;
		position: relative;
		z-index: 1;
		.sub-item {
			color: #fff;
			width: 184rpx;
			height: 72rpx;
			text-align: center;
			line-height: 70rpx;
			margin: 7rpx;
			font-size: 38rpx;
			position: relative;
			z-index: 2;
			transition: color 0.5s;
			&.active {
				color: #333333;
			}
		}
		.sub-block {
			width: 187rpx;
			height: 72rpx;
			background: #fff;
			border-radius: 42rpx;
			position: absolute;
			left: 7rpx;
			top: 7rpx;
			z-index: 1;
			transition: left 0.5s;
		}
	}
</style>